<template>
    <div class="box">
        <topLog></topLog>
        <div class="content">
            <div class="bg">
                <img src="../../../src/assets/images/hhh.jpg" alt=""> 
            </div>
            <h1 class="title">设计组织</h1>
            <div class="allbranch">
                <div class="branch-item" v-for="(item, index) in allBranch" :key="index">
                    <div class="item-title">
                        <h3>
                            <a @click="goBranch(item.navId)">{{item.navigation}}</a>
                        </h3>
                    </div>
                    <div class="items-little">
                        <ul>
                            <li v-for="(branchItem, branchIndex) in item.deps" :key="branchIndex">
                                <a @click="goDetail(item.navId, branchItem.navId)">{{branchItem.navigation}}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="line"></div>
                    <div class="clear"></div>
                </div>  
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
import topLog from '../../components/top-logo.vue'
import Footer from '../../components/footer.vue'
export default {
    components: {
        topLog,
        Footer
    },
    data() {
        return {
            allBranch: []
        }
    },
    mounted() {
        this.getALLBranch()
    },
    methods: {
        getALLBranch() {
            this.$http.get(this.$api.secondNavigation) 
            .then(res => {
                if(res.data.status === 20000) {
                    res.data.data.navigation.map((value, index) => {
                        this.allBranch.push(value)
                    })
                }
                console.log(this.allBranch);
            })
            .catch(error => {
                console.log(error);
            })
        },
        goBranch(item) {
            this.$router.push({
                path: '/branch',
                query: {
                id: item
                }
            })
        },
        goDetail(fId,sId) {
            this.$router.push({
                path: '/computer/branchdetail',
                query: {
                    firstId: fId,
                    secondId: sId
                }
            })
        },
    },
}
</script>

<style lang="less" scoped>
.content {
    .bg {
        width: 100%;
        img {
            width: 100%;
        }
    }
    .title {
        font-weight: 500;
        color: #434446;
    }
    .title::after {
        position: relative;
        top: 2px;
        left: 25%;
        content: "";
        width: 50%;
        height: 1px;
        background: #c2c2c2;
        display: block;
    }
    .allbranch {
        margin-top: 30px;
        margin-left: 25px;
        .branch-item {
            margin-top: 50px;
            .item-title {
                position: relative;
                height: 30px;
                width: 100%;
                background: url(../../../src/assets/images/branch-title.jpg) no-repeat;
                h3 {
                    position: absolute;
                    float: left;
                    margin: 10px 0;
                    font-weight: normal;
                    font-size: 18px;
                    padding-right: 8px;
                    margin-right: 8px;
                    top: -21px;
                    a {
                        cursor: pointer;
                        text-decoration: none;
                        color: #c71508;
                    }
                }
            }
            .items-little {
                ul {
                    list-style: none;
                    li {
                        float: left; 
                        width: 50%;
                        margin: 10px 0;
                        a{
                            float: left;
                            text-decoration: none;
                            color: #555;
                            font-size: 14px;
                            background: url(../../../src/assets/images/jt.jpg) no-repeat left center;
                            line-height: 30px;
                            display: block;
                            overflow: hidden;
                            padding-left: 15px;
                            display: -webkit-box;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 1;
                            cursor: pointer;
                        }
                    }
                }
            }
            .line {
                width: 100%;
                height: 17px;
                float: left;
                border-bottom: 1px dashed #c0c4cc;
            }
            .clear {
                clear: both;
            }
        }
    }
    .img {
        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>